<template>
  <div class="login">
    <div class="loginBox">
      <div class="loginMain">
        <!-- 左边 -->
        <div class="loginMainLeft">
          <img class="logo"
               src="../../assets/images/logo.jpg" />
          <div class="cn">电芯拆解管理系统</div>
          <div class="en">dian xin chai jie</div>
        </div>
        <!-- 右边 -->
        <div class="formBox">
          <div class="loginTit">用户登录<span>USER LOGIN</span></div>
          <van-form @submit="onSubmit">
            <van-cell-group inset
                            class="groupCss">
              <div class="formItem">
                <img class="formItemIcon"
                     src="../../assets/images/user.svg" />
                <van-field v-model="username"
                           name="username"
                           label=""
                           placeholder="请输入用户名"
                           class="inputCss" />
              </div>
              <div class="formItem">
                <img class="formItemIcon"
                     src="../../assets/images/pwd.svg" />
                <van-field v-model="password"
                           :type="pwdType"
                           name="password"
                           label=""
                           placeholder="请输入密码"
                           class="inputCss" />
                <div class="eyeCss"
                     @click="changeEye">
                  <img v-if="pwdType === 'password'"
                       class="eyeIcon"
                       src="../../assets/images/eye_close.png" />
                  <img v-else
                       class="eyeIcon"
                       src="../../assets/images/eye_open.png" />
                </div>
              </div>
            </van-cell-group>
            <!-- <div class="remDiv">
              <div>
                <van-checkbox v-model="checked"
                              shape="square"
                              icon-size="16px">记住我</van-checkbox>
              </div>
              <div class="remDivRight">忘记密码？</div>
            </div> -->
            <div class="btnDiv">
              <van-button round
                          block
                          type="primary"
                          native-type="submit"
                          class="btnCss">
                登录
              </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <div class="footerDiv">
      <div>copyright@123456</div>
      <div>技术支持技术支持</div>
    </div>
  </div>
</template>
<script>
import { loginApi } from "@/apis/index";
import { ref } from "vue";
import { useRouter } from "vue-router";

import { Toast } from 'vant';


export default {
  name: "Home",
  data () {
    return {};
  },
  components: {},
  mounted () { 
    
  },
  created () { },
  methods: {},
  setup () {
    const $router = useRouter();

    const username = ref("");
    const password = ref("");
    const pwdType = ref("password");
    const checked = ref(false)

    const onSubmit = (values) => {
      if (!values.username) {
        Toast('输入用户名');
        return
      }
      if (!values.password) {
        Toast('输入密码');
        return
      }
      loginHandle(values)
    };

    const loginHandle = async (data) => {
        data.grantType = 'mobile'
        const res = await loginApi({ ...data });
        if (res.code == 1) {
            // todo
            let userinfo = {
              id:res.data.id,
              username:res.data.username,
              actualName:res.data.actualName,
            }
            sessionStorage.setItem("accessToken", res.data.xaccessToken);
            sessionStorage.setItem("userinfo", JSON.stringify(userinfo));
            $router.replace('/taskList');
        }
       
    };

    const changeEye = () => {
      pwdType.value = pwdType.value === 'password' ? 'text' : 'password'
    }

    return {
      username,
      password,
      onSubmit,
      pwdType,
      changeEye,
      checked
    };
  },
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url("../../assets/images/login-bg.jpg");
  background-position:center center;
  background-repeat:no-repeat;
  background-attachment:scroll;
  background-size:cover;
  background-origin:border-box;
  border:none;
  border-radius:0px;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
  // background-size: 100% 100%;

  .loginBox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loginMain {
    display: flex;
    width: 512px;
    height: 420px;
    background-color: #ffffff;
    margin-top: -10%;

    .loginMainLeft {
      width: 40%;
      background: url("../../assets/images/u30.svg") no-repeat center bottom;
      background-size: 100% 100%;
      text-align: center;
      .logo {
        width: 60px;
        height: 60px;
        margin: 30px 0 10px;
      }
      .cn {
        color: #363636;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -1px;
      }
      .en {
        color: #888888;
        font-size: 15px;
      }
    }

    .formBox {
      width: 60%;
      padding: 20px 10px;

      .loginTit {
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        color: rgb(85, 85, 85);
        padding: 0 20px;
        margin-bottom: 20%;
        letter-spacing: -1px;

        span {
          font-weight: normal;
          font-size: 16px;
          margin-left: 10px;
        }
      }

      .groupCss {
        overflow: inherit;
      }

      .formItem {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        letter-spacing: normal;
        color: rgb(0, 0, 0);
        text-align: left;
        text-transform: none;
        background-color: transparent;
        padding: 3px 2px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(230, 230, 230, 1);
        border-radius: 3px;
        margin-bottom: 20px;

        .formItemIcon {
          width: 14px;
          height: 14px;
          margin: 0 7px 0 5px;
        }

        .inputCss {
          height: 30px;
          line-height: 30px;
          padding: 0;
        }
      }

      .eyeCss {
        padding: 0 6px;

        .eyeIcon {
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }
      }
    }

    .remDiv {
      margin-top: 20%;
      margin-bottom: 16px;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      padding: 0 10px 0 14px;
      color: #888888;
      .remDivRight {
        color: #3f9eff;
      }
    }

    .btnDiv {
      padding: 0 16px;
    }

    .btnCss {
      height: 40px;
      background-color: #3f9eff;
      border: #3f9eff 1px solid;
      border-radius: 5px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      font-family: "思源黑体";
      font-weight: 400;
      font-style: normal;
    }
  }
}

.van-cell:after {
  border-bottom: 0;
}

.footerDiv {
  position: fixed;
  width: 100%;
  bottom: 4%;
  color: #efefef;
  text-align: center;
  z-index: 1;
  font-size: 14px;
  line-height: 1.6;
}
</style>